<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
	<title>个人中心 - 日新网</title>
	<link rel="stylesheet" href="__TMPL__Public/assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="__TMPL__Public/assets/css/reset.css">
	<link rel="stylesheet" href="__TMPL__Public/assets/css/style.css">
	<script type="text/javascript" src="__TMPL__Public/assets/js/rem.js"></script>
	<link rel="stylesheet" type="text/css" href="__TMPL__Public/assets/clickphoto/clickphoto.css">
	<script src="__TMPL__Public/assets/clickphoto/jquery.min.js"></script>
	<script src="__TMPL__Public/assets/clickphoto/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
	<script src="__TMPL__Public/assets/clickphoto/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
	<script src="__TMPL__Public/assets/clickphoto/hammer.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="__TMPL__Public/assets/clickphoto/jquery.photoClip.min.js" type="text/javascript" charset="utf-8"></script>
	<style>

		.row {
			background-color: #fff;
			height: .76rem;
			line-height: .76rem;
			color: #000232;
			font-size: .28rem;
			letter-spacing: .02rem;
			margin-bottom: .08rem;
		}
		.row1 {
			 margin-top: .3rem;
			 margin-bottom:.3rem;
		 }
		.row6 {
			margin-top: .3rem;
		}
		.gt_btn{
			color: #c5c5c5;font-size: .26rem;
		}
		/*剪切头上样式*/
		#view {
			width: 1.8rem;
			height: 1.8rem;
		}
		.clipContent {
			width: 1.4rem;
			height: .32rem;
			line-height: .32rem;
			margin:.1rem auto 0;
		}
		#clipArea {
			max-height:500px;
		}
		.row_btm {
			margin-top: .5rem;
			letter-spacing: 2px;
			font-size:.30rem;
			background-color: #fff;
			text-align: center;
			display: block;
			width: 7.5rem;
			margin-left: 0!important;
			margin-right: 0!important;
		}
	</style>
</head>

<body>
	<!--nav-->
	<tc_include file="Public:nav"/>
	<!--个人中心主页-->
	<div class="comWidth personal clearfix">
		<div class=" pull-left">
			<div>
				<div class="tabs">
					<div class="tab-content clearfix">
						<div class="clipRow2" style="" ontouchstart="">
							<div class="cover-wrap">
								<div class="clipBgn">
									<div id="clipArea">
										<div class="photo-clip-view">
											<div class="photo-clip-moveLayer">
												<div class="photo-clip-rotateLayer">
												</div>
											</div>
										</div>
										<div class="photo-clip-mask">
											<div class="photo-clip-mask-left"></div>
											<div class="photo-clip-mask-right"></div>
											<div class="photo-clip-mask-top"></div>
											<div class="photo-clip-mask-bottom"></div>
											<div class="photo-clip-area"></div>
										</div>
									</div>
									<div class="clipButton" style="position: relative;">
										<button id="clipBtn">保存图片</button>
									</div>
								</div>
							</div>
							<div id="view"></div>
							<div class="clipContent" style="">上传图片<input type="file" id="file" accept="image/*">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="personal_text">
			<p style="text-align: right;"><a href="{:U('user/profile/edit_baseinfo')}"><span class="rx_btn">修改</span></a></p>
			<p class="name"><span>{$user_nicename|default='未填写'}</span><i>{$positiion|default='未填写'}</i></p>
			<p class="company">{$company|default='未填写'}</p>
			<ul class="clearfix">
				<php>$marry_status = array('0' => '未婚', '1' => '已婚');</php>
				<li>{$marry_status[$marry]}</li>
				<li style="width:40%;">{$birthday|default='未填写'}</li>
				<li>{$city_name|default='未填写'}</li>
			</ul>
			<p class="personal_introduce ellipsis3 ">{$signature|default='未填写'}</p>
		</div>
	</div>
	<div class="container">
		<a href="{:U('comment/comment/index')}">
			<div class="row " style="margin-top: .3rem;">
				<div class="col-xs-6">我的评论</div>
				<div class="col-xs-6 text-right gt_btn" >&gt;</div>
			</div>
		</a>
		<a href="{:U('Portal/List/mobile_list_sub_menu')}">
			<div class="row ">
				<div class="col-xs-6">我的投稿</div>
				<div class="col-xs-6 text-right gt_btn" >&gt;</div>
			</div>
		</a>
		<a href="{:U('question/question/center_question')}">
			<div class="row ">
				<div class="col-xs-6">我的问答</div>
				<div class="col-xs-6 text-right gt_btn" >&gt;</div>
			</div>
		</a>

		<a href="{:U('Order/Order/mobile_order_sub_menu')}">
			<div class="row ">
				<div class="col-xs-6">我的订单</div>
				<div class="col-xs-6 text-right gt_btn" >&gt;</div>
			</div>
		</a>
		<a href="{:U('user/profile/edit_baseinfo')}">
			<div class="row ">
				<div class="col-xs-6">我的资料</div>
				<div class="col-xs-6 text-right gt_btn" >&gt;</div>
			</div>
		</a>
		<a href="{:U('professor/professor/professor_edit')}">
			<div class="row ">
				<div class="col-xs-6">专栏认证</div>
				<div class="col-xs-6 text-right gt_btn" >&gt;</div>
			</div>
		</a>
	</div>

	<a class="row row_btm" style="" href="{:U('user/index/logout')}">
		退出登录
	</a>

	<!--页脚-->
	<tc_include file="Public:footer"/>

	<script type="text/javascript" src="__TMPL__Public/assets/js/jquery.1.12.4.js"></script>
	<script src="__TMPL__Public/assets/js/bootstrap.min.js" ></script>
    <script>
        $(function () {
            
            // 原头像加载
            var old_avatar = "{:sp_get_user_avatar_url($avatar)}?t={:time()}";
            if (old_avatar) {
                $('#view').css('background-image', 'url(' + old_avatar + ')');
            }
        })
    </script>
	<script type="text/javascript">
		//上传封面
		var clipArea = new bjj.PhotoClip("#clipArea", {
			size: [200, 200],// 截取框的宽和高组成的数组。默认值为[260,260]
			outputSize: [0, 0], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
			//outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
			file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
			view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
			ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
			loadStart: function (fileObj) {
				// 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
				$('.cover-wrap').fadeIn();
				console.log("照片读取中");
			},
			loadComplete: function () {
				// 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
				console.log("照片读取完成");
			},
			//loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
			clipFinish: function (dataURL) {
				// 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
				$('.cover-wrap').fadeOut();
				$('#view').css('background-size', '100% 100%');
				// console.log(dataURL); //输出图像base64

				$.post("{:U('User/Profile/save_user_avatar')}", {data_url : dataURL}, function (re) {
					if (re.status) {
						$('.headicon').attr('src', re.data);
					} else {
						layer.msg(re.info);
					}
				})
			}
		});
	</script>

</body> 
</html>